<template>
  <div class="pvModule">
    <el-card>
      <el-row>
        <el-form ref="form" :model="form" class="searchLine" label-width="85px">
          <el-form-item label="单位" class="searchItem">
            <el-select v-model="form.companyCode" size="small" placeholder="请选择单位" style="width:250px;" @change="companyChange" clearable filterable>
              <el-option v-for="item in tree" :label="item.companyName" :value="item.companyCode"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="场站" class="searchItem">
            <el-select v-model="form.stationCode" size="small" placeholder="请选择场站" style="width:250px;" @change="stationChange" clearable filterable>
              <el-option v-for="item in stationList" :label="item.stationName" :value="item.stationCode" :key="item.stationCode"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方阵编号" class="searchItem">
            <el-select v-model="form.matrixNumber" size="small" placeholder="请选择方阵编号" style="width:250px;" @change="matrixNumberChange" clearable filterable>
              <el-option v-for="item in matrixList" :label="item.pvArrayCode" :value="item.pvArrayCode" :key="item.pvArrayCode"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="组串编号" class="searchItem">
            <el-select v-model="form.pvClusterNumber" size="small" placeholder="请选择光伏组串编号" style="width:250px;" @change="pvClusterChange" clearable filterable>
              <el-option v-for="item in pvArrayList" :label="item.pvStringCode" :value="item.pvStringCode" :key="item.pvStringCode"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="组件编号" class="searchItem">
            <el-select v-model="form.pvModuleNumber" size="small" placeholder="请选择光伏组件编号" style="width:250px;" clearable filterable>
              <el-option v-for="item in pvModuleCodeList" :label="item.pvModuleCode" :value="item.pvModuleCode" :key="item.pvModuleCode"></el-option>
            </el-select>
          </el-form-item>
<!--          <el-form-item label="排序方式" class="searchItem">-->
<!--            <el-select v-model="form.order" placeholder="请选择排序方式" size="small" style="width:250px;">-->
<!--              <el-option label="倒序" value="desc"></el-option>-->
<!--              <el-option label="顺序" value="asc"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
        </el-form>
      </el-row>
      <el-row>
        <el-button @click="reset" size="small" style="float:right; margin-left:10px;">重置</el-button>
        <el-button type="primary" icon="el-icon-search"style="float:right;" @click="listSearch" size="small">查询</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="addNewStation" size="small">新增组件</el-button>
        <el-button type="primary" @click="uploadStationTemplate" size="small">模版下载</el-button>
        <el-button type="primary" icon="el-icon-upload2" @click="uploadStation" size="small">上传组件信息</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="deleteStation" size="small">删除</el-button>
      </el-row>
    </el-card>
    <el-row style="margin-top:10px;">
      <el-table
       :data="tableData"
       tooltip-effect="dark"
       size="small"
       @selection-change="handleSelectionChange"
       stripe
       border
       style="width: 100%">
       <el-table-column
        type="selection"
        width="55">
      </el-table-column>
       <el-table-column
         label="序号"
         type="index"
         width="60"
         >
       </el-table-column>
       <el-table-column
         label="单位"
         show-overflow-tooltip
         width="250"
         >
         <template slot-scope="scope">
           <span style="color:#606266;">
             {{
               scope.row.companyCode && tree.find(item => item.companyCode === scope.row.companyCode) && tree.find(item => item.companyCode === scope.row.companyCode).companyName
             }}
           </span>
         </template>
       </el-table-column>
       <el-table-column
         prop="stationName"
         width="250"
         show-overflow-tooltip
         label="场站名称">
       </el-table-column>
       <!-- <el-table-column
         prop="pvArrayCode"
         width="300"
         show-overflow-tooltip
         label="方阵编码">
       </el-table-column> -->
       <el-table-column
         prop="pvStringCode"
         width="250"
         show-overflow-tooltip
         label="光伏组串编号">
       </el-table-column>
       <el-table-column
         prop="pvModuleCode"
         width="250"
         show-overflow-tooltip
         label="光伏组件编号">
       </el-table-column>
       <el-table-column
         prop="clatLng"
         width="250"
         show-overflow-tooltip
         label="光伏板组串中心经纬度">
       </el-table-column>
       <!-- <el-table-column
         prop="stationAdminName"
         width="250"
         show-overflow-tooltip
         label="光伏板编号列表">
       </el-table-column> -->
       <el-table-column
         prop="startUseDay"
         width="150"
         show-overflow-tooltip
         label="投入使用时间">
       </el-table-column>
       <el-table-column
         prop="endUseDay"
         width="150"
         show-overflow-tooltip
         label="停止使用时间">
       </el-table-column>
       <el-table-column
         prop="describeInfo"
         width="150"
         show-overflow-tooltip
         label="描述信息">
       </el-table-column>
       <el-table-column
         width="150"
         show-overflow-tooltip
         label="状态">
         <template slot-scope="scope">
           <span>
             {{
               scope.row.useState === 1 ? '使用中' : '停用'
             }}
           </span>
         </template>
       </el-table-column>
       <el-table-column
         label="操作">
         <template slot-scope="scope">
           <span class="btn" @click="changeStation(scope.row)">修改</span>
         </template>
       </el-table-column>
     </el-table>
    </el-row>
    <el-row class='pagination'>
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <!-- @size-change="handleSizeChange"
      :page-sizes="[100, 200, 300, 400]"
      sizes -->
    </el-row>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="cancelSubmit">
      <el-form :model="newForm" ref="newStation" :rules="rules" label-width="120px" style="padding-left:40px;">
        <el-form-item label="单位名称:" prop="companyCode">
          <!-- <SelectTree ref="orgTree" v-model="newForm.companyCode" width="250px;" style="height:40px;" :options="tree" :props="defaultProps" /> -->
          <el-select v-model="newForm.companyCode" size="small" placeholder="请选择单位" style="width:250px;" @change="companyChange1" clearable>
            <el-option v-for="item in tree" :label="item.companyName" :value="item.companyCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="场站名称:"  prop="stationCode">
          <el-select v-model="newForm.stationCode" size="small" placeholder="请选择场站" style="width:250px;" @change="stationChange1" clearable>
            <el-option v-for="item in stationList1" :label="item.stationName" :value="item.stationCode" :key="item.stationCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方阵编码:" prop="pvArrayCode">
          <el-select v-model="newForm.pvArrayCode" size="small" placeholder="请填写方阵编号" style="width:250px;" @change="matrixNumberChange1" clearable>
            <el-option v-for="item in matrixList1" :label="item.pvArrayCode" :value="item.pvArrayCode" :key="item.pvArrayCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组串编码:" prop="pvStringCode">
          <el-select v-model="newForm.pvStringCode" size="small" placeholder="请填写组串编码" style="width:250px;" clearable>
            <el-option v-for="item in pvStringCodeList1" :label="item.pvStringCode" :value="item.pvStringCode" :key="item.pvStringCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组件编码:" prop="pvModuleCode">
          <el-input v-model="newForm.pvModuleCode" size="small" placeholder="请输入组件编码" style="width:250px;"/>
        </el-form-item>
        <el-form-item label="投入使用日期:" prop="startUseDay">
          <el-date-picker
            v-model="newForm.startUseDay"
            size="small"
            type="date"
            style="width:250px;"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="停止使用日期:" prop="endUseDay">
          <el-date-picker
            v-model="newForm.endUseDay"
            size="small"
            type="date"
            style="width:250px;"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="中心经纬度:" prop="clatLng">
          <el-input v-model="newForm.clatLng" size="small" placeholder="纬度在前，经度在后，形如(111,222)" style="width:250px;"/>
        </el-form-item>
        <el-form-item label="使用状态:" prop="useState">
          <el-switch
            size="small"
            v-model="newForm.useState"
            />
        </el-form-item>
        <el-form-item label="描述信息:" prop="describeInfo">
          <el-input
            type="textarea"
            size="small"
            style="width:250px;"
            :rows="2"
            placeholder="请输入描述信息"
            v-model="newForm.describeInfo">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSubmit" size="small">取 消</el-button>
        <el-button type="primary" @click="addSubmit" size="small">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="导入组件信息" :visible.sync="uploadDataVisible" width="500px"  @close="cancelUpload">
      <el-form :model="uploadForm" ref="uploadStation" label-width="85px" style="padding-left:50px;">
        <el-form-item label="单位名称:">
          <el-select v-model="uploadForm.companyCode" size="small" placeholder="请选择单位" style="width:250px;" @change="companyChange2">
            <el-option v-for="item in tree" :label="item.companyName" :value="item.companyCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="场站名称:">
          <el-select v-model="uploadForm.stationCode" size="small" placeholder="请选择场站" style="width:250px;" clearable>
            <el-option v-for="item in stationList2" :label="item.stationName" :value="item.stationCode" :key="item.stationCode"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="方阵编码:">
          <el-select v-model="uploadForm.pvArrayCode" size="small" placeholder="请填写方阵编号" style="width:250px;" clearable @change="matrixNumberChange2">
            <el-option v-for="item in matrixList2" :label="item.pvArrayCode" :value="item.pvArrayCode" :key="item.pvArrayCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组串编码:">
          <el-select v-model="uploadForm.pvStringCode" size="small" placeholder="请填写组串编码" style="width:250px;" clearable>
            <el-option v-for="item in pvStringCodeList2" :label="item.pvStringCode" :value="item.pvStringCode" :key="item.pvStringCode"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="选择文件:"  prop="name">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-change="handleChange"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :multiple="false"
            :show-file-list="false"
            :auto-upload="false">
            <!-- <el-button size="small" type="primary">选择文件</el-button>
            {{ file && file.name }} -->
            <el-input style="width:250px;" size="small" prefix-icon="el-icon-folder-add" placeholder="请选择文件" v-model="file && file.name"></el-input>
          </el-upload>
        </el-form-item>
        <!-- <el-form-item label="场站类型:">
          <el-radio-group v-model="uploadForm.type" size="small">
            <el-radio label="csv">csv</el-radio>
            <el-radio label="xlsx">xlsx</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="uploadSubmit" size="small">确 定</el-button>
        <el-button @click="cancelUpload" size="small">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import stationApi from "../../../api/stations"
import matrixApi from "../../../api/matrix"
import manualApi from "../../../api/manual"
import pvClusterApi from "../../../api/pvCluster"
import pvModuleApi from '../../../api/pvModule'
import moment from 'moment'
export default {
  name: "pvModule",
  data() {
    return {
      loading: false,
      tree: [],
      form: {
        companyCode: '',
        stationCode: '',
        matrixNumber: '',
        pvClusterNumber: '',
        pvModuleNumber: '',
        order: 'desc'
      },
      stationList: [],
      stationList1: [],
      stationList2: [],
      matrixList1:[],
      matrixList2: [],
      matrixList: [],
      newForm: {
        companyCode: '',
        stationCode: '',
        describeInfo: '',
        pvArrayCode: '',
        endUseDay: '',
        startUseDay: '',
        clatLng: '',
        useState: true,
        pvStringCode: '',
        pvModuleCode: ''
      },
      fileList: [],
      pvArrayList: [],
      pvStringCodeList1: [],
      pvStringCodeList2: [],
      pvModuleCodeList: [],
      uploadForm: {
        // type: 'xlsx',
        companyCode: '',
        stationCode: '',
        // pvArrayCode: '',
        // pvStringCode: ''
      },
      file: null,
      title: '',
      total: 0,
      pageSize: 10,
      currentPage: 1,
      dialogFormVisible: false,
      uploadDataVisible: false,
      tableData: [
      ],
      defaultProps: {
        parent: 'pid',
        value: 'id',
        label: 'name',
        children: 'children'
      },
      selection: [],
      rules: {
        companyCode: [
          { required: true, message: '请输入场站名称', trigger: 'change' }
        ],
        clatLng: [
          { required: true, message: '请输入中心经纬度', trigger: 'blur' }
        ],
        stationCode: [
          { required: true, message: '请选择场站名称', trigger: 'change' }
        ],
        endUseDay: [
          { required: true, message: '请选择停止使用日期', trigger: 'blur' }
        ],
        startUseDay: [
          { required: true, message: '请选择开始使用日期', trigger: 'blur' }
        ],
        useState: [
          { required: true, message: '请选择开始使用日期', trigger: 'blur' }
        ],
        pvArrayCode: [
          { required: true, message: '请输入光伏方阵编码', trigger: 'blur' }
        ],
        pvStringCode: [
          { required: true, message: '请输入光伏组串编码', trigger: 'blur' }
        ],
        pvModuleCode: [
          { required: true, message: '请输入光伏组串编码', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getList()
    this.getCompanies()
  },
  methods: {
    companyChange2(value) {
      this.stationList2 = []
      this.uploadForm.stationCode = ''
      this.uploadForm.pvArrayCode = ''
      this.pvStringCodeList2 = []
      this.uploadForm.pvStringCode = ''
      this.matrixList2 = []
      if (!value) {
        this.uploadForm.companyCode = ''
        return
      }
      manualApi.getStationByCompany({
        companyCode: value
      }).then(res => {
        if (res && res.status === 200 && res.data.code === 200) {
          this.stationList2 = res.data.data
        }
      })
    },
    stationChange2(value) {
      this.uploadForm.pvArrayCode = ''
      this.matrixList2 = []
      this.pvStringCodeList2 = []
      this.uploadForm.pvStringCode = ''
      if (!value) {
        this.uploadForm.stationCode = ''
        return
      }
      matrixApi.getmatrixNummberByCompany({
        stationCode: value
      }).then(res => {
        if (res && res.status === 200 && res.data.code === 200) {
          this.matrixList2 = res.data.data
        }
      })
    },
    companyChange(value) {
      this.stationList = []
      this.form.stationCode = ''
      this.matrixList = []
      this.form.matrixNumber = ''
      this.pvArrayList = []
      this.pvModuleCodeList = []
      this.form.pvClusterNumber = ''
      this.form.pvModuleNumber = ''
      if (!value) {
        this.form.companyCode = ''
        return
      }
      manualApi.getStationByCompany({
        companyCode: value
      }).then(res => {
        if (res && res.status === 200 && res.data.code === 200) {
          this.stationList = res.data.data
        }
      })
    },
    matrixNumberChange(value) {
      this.pvArrayList = []
      this.form.pvClusterNumber = ''
      this.pvModuleCodeList = []
      this.form.pvModuleNumber = ''
      if (!value) {
        this.form.matrixNumber = ''
        return
      }
      pvClusterApi.getpvClusterByMrtrixNumber({
        pvArrayCode: value
      }).then(res => {
        if (res && res.status === 200 && res.data.code === 200) {
          this.pvArrayList = res.data.data
        }
      })
    },
    matrixNumberChange1(value) {
      this.pvStringCodeList1 = []
      this.newForm.pvStringCode = ''
      this.newForm.pvModuleCode = ''
      this.pvModuleCodeList = []
      if (!value) {
        this.newForm.pvArrayCode = ''
        return
      }
      pvClusterApi.getpvClusterByMrtrixNumber({
        pvArrayCode: value
      }).then(res => {
        if (res && res.status === 200 && res.data.code === 200) {
          this.pvStringCodeList1 = res.data.data
        }
      })
    },
    matrixNumberChange2(value) {
      this.pvStringCodeList2 = []
      this.uploadForm.pvStringCode = ''
      if (!value) {
        this.uploadForm.pvArrayCode = ''
        return
      }
      pvClusterApi.getpvClusterByMrtrixNumber({
        pvArrayCode: value
      }).then(res => {
        if (res && res.status === 200 && res.data.code === 200) {
          this.pvStringCodeList2 = res.data.data
        }
      })
    },
    pvClusterChange(value) {
      this.pvModuleCodeList = []
      this.form.pvModuleNumber = ''
      if (!value) {
        this.form.pvClusterNumber = ''
        return
      }
      pvModuleApi.getpvModuleByPvCluster({
        pvStringCode: value
      }).then(res => {
        if (res && res.status === 200 && res.data.code === 200) {
          this.pvModuleCodeList = res.data.data
        }
      })
    },
    stationChange(value) {
      this.matrixList = []
      this.form.matrixNumber = ''
      this.pvArrayList = []
      this.form.pvClusterNumber = ''
      this.pvModuleCodeList = []
      this.form.pvModuleNumber = ''
      if (!value) {
        this.form.stationCode = ''
        return
      }
      matrixApi.getmatrixNummberByCompany({
        stationCode: value
      }).then(res => {
        if (res && res.status === 200 && res.data.code === 200) {
          this.matrixList = res.data.data
        }
      })
    },
    companyChange1(value) {
      this.stationList1 = []
      this.newForm.stationCode = ''
      this.matrixList1 = []
      this.newForm.pvArrayCode = ''
      this.pvStringCodeList1 = []
      this.newForm.pvStringCode = ''
      if (!value) {
        this.newForm.companyCode = ''
        return
      }
      manualApi.getStationByCompany({
        companyCode: value
      }).then(res => {
        if (res && res.status === 200 && res.data.code === 200) {
          this.stationList1 = res.data.data
        }
      })
    },
    stationChange1(value) {
      this.matrixList1 = []
      this.newForm.pvArrayCode = ''
      this.pvStringCodeList1 = []
      this.newForm.pvStringCode = ''
      if (!value) {
        this.newForm.stationCode = ''
        return
      }
      matrixApi.getmatrixNummberByCompany({
        stationCode: value
      }).then(res => {
        if (res && res.status === 200 && res.data.code === 200) {
          this.matrixList1 = res.data.data
        }
      })
    },
    cancelSubmit() {
      this.dialogFormVisible = false
      this.newForm = {
        companyCode: '',
        stationCode: '',
        describeInfo: '',
        pvArrayCode: '',
        endUseDay: '',
        startUseDay: '',
        clatLng: '',
        useState: true,
        pvStringCode: '',
        pvModuleCode: ''
      }
      this.stationList1 = []
      this.newForm.companyCode = ''
      this.newForm.stationCode = ''
      this.matrixList1 = []
      this.newForm.pvArrayCode = ''
      this.pvStringCodeList1 = []
      this.newForm.pvModuleNumber = ''
    },
    cancelUpload() {
      this.uploadDataVisible = false
      this.uploadForm = {
        // type: 'xlsx',
        companyCode: '',
        stationCode: ''
        // pvArrayCode: '',
        // pvStringCode: ''
      }
      // this.matrixList2 = []
      // this.pvStringCodeList2 = []
      this.stationList2 = []
      this.fileList = []
      this.file = null
    },
    uploadStationTemplate() {
      window.open('/bigdata-pv-backend/stationManage/moduleInfo/downloadTemplate')
    },
    listSearch() {
      this.currentPage = 1
      // this.pageSize = 100
      this.getList()
    },
    getCompanies() {
      stationApi.getCompanyList().then(res => {
        if (res && res.data.code === 200) {
          this.tree = res.data.data
        }
      })
    },
    reset() {
      this.stationList = []
      this.form.companyCode = ''
      this.form.stationCode = ''
      this.form.order = ''
      this.matrixList = []
      this.form.matrixNumber = ''
      this.pvArrayList = []
      this.pvModuleCodeList = []
      this.form.pvClusterNumber = ''
      this.form.pvModuleCode = ''
      this.currePage = 1
      // this.pageSize = 100
      this.getList()
    },
    getList() {
      this.loading = true
      pvModuleApi.getList({
        companyCode: this.form.companyCode,
        stationCode: this.form.stationCode,
        pvArrayCode: this.form.pvArrayCode,
        pvStringCode: this.form.pvStringCode,
        pvModuleCode: this.form.pvModuleNumber,
        page: this.currentPage,
        limit: this.pageSize,
        sidx: 'create_at',
        order: this.form.order
      }).then(res => {
        this.loading = false
        if (res && res.data.code === 200) {
          this.tableData = res.data.data.list
          this.total = res.data.data.totalCount
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        this.loading = false
      })
    },
    handleSelectionChange(selection) {
      this.selection = selection
    },
    // handleSizeChange(pageSize) {
    //   this.pageSize = pageSize
    //   this.currentPage = currentPage
    // },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getList()
    },
    addNewStation() {
      this.dialogFormVisible = true
      this.title = '新增组件'
    },
    handleChange(file, fileList) {
      this.file = file.raw
    },
    uploadStation() {
      this.uploadDataVisible = true
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList, 'handleRemove');
    },
    handlePreview(file) {
      console.log(file, 'handlePreview');
    },
    deleteStation() {
      if (this.selection.length === 0) {
        this.$message.error('请选择需要删除的组件')
        return
      }
      this.$confirm('是否确认删除选中组件', '确定', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        pvModuleApi.deletePvModule({
          ids: this.selection.map(item => item.id)
        }).then(res => {
          if (res && res.data.code === 200) {
            this.$message.success('删除组件成功')
            this.getList()
          } else {
            this.$message.error(res.data.message)
          }
        })
      }).catch(() => {
        console.log('取消删除')
      })
    },
    changeStation(data) {
      this.dialogFormVisible = true
      this.title = '修改组串信息'
      if (data.companyCode) {
        this.companyChange1(data.companyCode)
      }
      if (data.stationCode) {
        this.stationChange1(data.stationCode)
      }
      if (data.pvArrayCode) {
        this.matrixNumberChange1(data.pvArrayCode)
      }
      this.newForm = {
        ...data,
        useState: data.useState === 1 ? true : false,
        startUseDay: data.startUseDay ? moment(data.startUseDay) : '',
        endUseDay: data.endUseDay ? moment(data.endUseDay) : ''
      }
    },
    addSubmit() {
      this.$refs.newStation.validate((valid) => {
          if (valid) {
            if (this.title === '新增组件') {
              pvModuleApi.addNewPvModule({
                ...this.newForm,
                useState: this.newForm.useState ? 1 : 0,
                startUseDay: moment(this.newForm.startUseDay).format('YYYY-MM-DD HH:mm:ss'),
                endUseDay: moment(this.newForm.endUseDay).format('YYYY-MM-DD HH:mm:ss'),
                clatLng: this.newForm.clatLng.replace(/，/, ',').replace(/（/, '(').replace(/）/, ')')
              }).then(res => {
                if (res && res.data.code === 200) {
                  this.$message.success('新增组件成功')
                  this.dialogFormVisible = false
                  this.newForm = {
                    companyCode: '',
                    stationCode: '',
                    describeInfo: '',
                    pvArrayCode: '',
                    endUseDay: '',
                    startUseDay: '',
                    clatLng: '',
                    useState: true,
                    pvStringCode: '',
                    pvModuleCode: ''
                  }
                  this.getList()
                } else {
                  this.$message.error(res.data.message)
                }
              })
            } else {
              pvModuleApi.updatePvModule({
                ...this.newForm,
                useState: this.newForm.useState ? 1 : 0,
                startUseDay: moment(this.startUseDay).format('YYYY-MM-DD HH:mm:ss'),
                endUseDay: moment(this.endUseDay).format('YYYY-MM-DD HH:mm:ss'),
                clatLng: this.newForm.clatLng.replace(/，/, ',').replace(/（/, '(').replace(/）/, ')')
              }).then(res => {
                if (res && res.data.code === 200) {
                  this.$message.success('修改组件信息成功')
                  this.dialogFormVisible = false
                  this.newForm = {
                    companyCode: '',
                    stationCode: '',
                    describeInfo: '',
                    pvArrayCode: '',
                    endUseDay: '',
                    startUseDay: '',
                    clatLng: '',
                    useState: true,
                    pvStringCode: '',
                    pvModuleCode: ''
                  }
                  this.getList()
                } else {
                  this.$message.error(res.data.message)
                }
              })
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
    },
    uploadSubmit() {
      if (!this.uploadForm.companyCode) {
        this.$message.error('请选择所属单位')
        return
      }
      if (!this.file) {
        this.$message.error('请选择上传文件')
        return
      }
      let formData = new FormData()
      formData.append('mfile', this.file);
      formData.append('companyCode', this.uploadForm.companyCode)
      formData.append('stationCode', this.uploadForm.stationCode)
      // formData.append('pvArrayCode', this.uploadForm.pvArrayCode)
      // formData.append('pvStringCode', this.uploadForm.pvStringCode)
      pvModuleApi.uploadPvModule(formData).then(res => {
        if (res && res.data.code === 200) {
          this.uploadForm = {
            // type: 'xlsx',
            companyCode: '',
            stationCode: '',
            // pvArrayCode: '',
            // pvStringCode: ''
          }
          this.file = null
          // this.matrixList2 = []
          // this.pvStringCodeList2 = []
          this.stationList2 = []
          this.uploadDataVisible = false
          this.$message.success(res.data.message)
          this.getList()
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .background{
    /*background-color: rgba(0,58,102,0.6);*/
  }
  .el-table{
    /*border-top: 1px solid #096f9c;*/
    /*border-left: 1px solid #096f9c;*/
    /*border-right: 1px solid #096f9c;*/
  }
  .el-table td:not(:last-child), .el-table th.is-leaf:not(:last-child){
    /*border-right: 1px solid #096f9c;*/
  }
  .el-table th{
    /*background: #0c6ca2;*/
  }
  .el-table tr:nth-child(odd) td{
    /*background: #003a66;*/
  }
  .el-checkbox__inner{
    /*background: #00487e;*/
    /*border-color: #0c6ca2;*/
  }
  .pvModule{
    // span{
    //   color: white;
    // }
    .searchLine{
      .searchItem{
        display: inline-block;
        vertical-align: top;
      }
      .el-form-item{
        margin-bottom: 5px !important;
      }
    }
    .btn{
      color:#409EFF;
      cursor: pointer;
    }
    .pagination{
      margin-top: 20px;
      text-align: center;
      // .el-pagination.is-background .el-pager li:not(.disabled).active{
      //   background: #09f !important;
      //   color:#fff !important;
      // }
      .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
        /*background: #003a66 !important;*/
      }
    }
    .el-dialog__header{
      border-bottom: 1px solid #fff;
    }
    .el-icon-close{
      // color:#fff !important;
    }
    .el-form-item__content{
      height: 40px;
    }
    .dialog-footer{
      text-align: center;
    }
    .el-dialog__body{
      padding-left: 90px;
    }
  }

</style>
